<template>
  <ul class="comments m-t-2">
    <Comment v-for="(item, i) in comments" :key="i" :comment="item"></Comment>
  </ul>
</template>

<script>
import Comment from "@/components/article-detail/comment/showComment/Comment";
import { getComment } from "@/api/article";
import { normlizeComment } from "@/utils/utils";
export default {
  name: "comments",
  components: {
    Comment,
  },
  data() {
    return {
      comments: [],
    };
  },
  methods: {
    async getData() {
      const id = this.$route.params.id;
      const r = await getComment(id);
      const res = normlizeComment(r.data);
      this.comments = res;
    },
  },
  created() {
      this.getData();
      this.$bus.$on('getData', () => {
          this.getData();
      })
  },
};
</script>

<style lang="scss" scoped>
</style>